import { BarChartOutlined, ChromeOutlined, SettingOutlined, FileProtectOutlined, WindowsOutlined, LockOutlined, MailOutlined, HomeOutlined } from '@ant-design/icons';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { useState } from 'react';
import { Outlet, useNavigate } from 'react-router-dom';
const { Header, Content, Sider } = Layout;

function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
  };
}
// 左侧菜单
const items = [
  getItem('首页', '', <HomeOutlined />),
  getItem('访客记录', 'sub1', <MailOutlined />, [
    getItem('访客列表', '/home/news1'),
    getItem('访客添加修改', '/home/news2'),
    getItem('负责人操作导入详细', '/home/todolist'),
  ]),
  getItem('部门管理', 'sub2', <BarChartOutlined />, [getItem('部门列表', '6'), getItem('部门添加修改', '8')]),
  getItem('管理员', 'sub3', <LockOutlined />, [getItem('管理员列表', '7'), getItem('管理员添加修改', '11')]),
  getItem('核销人员管理', 'sub4', <ChromeOutlined />, [
    getItem('核销人员列表', '1'),
    getItem('核销人员添加修改', '2'),
    getItem('核销人员日志', '0'),
  ]),
  getItem('审核日志', 'sub5', <FileProtectOutlined />, [getItem('审核列表', '10')]),
  getItem('校园动态', 'sub6', <WindowsOutlined />, [getItem('校园动态列表', '15'), getItem('校园动态添加修改', '16')]),
  getItem('系统设置', '12', <SettingOutlined />),
];
const Home = () => {
  const navigate = useNavigate()
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  return (
    <Layout
      style={{
        minHeight: '100vh',
      }}
    >
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div
          style={{
            height: 50,
            borderRadius: 50,
            margin: 16,
            background: 'rgba(255, 255, 255, 0.2)',
          }}
        />
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" onSelect={(item=>{navigate(item.keyPath[0])
        })} items={items} />
      </Sider>
      <Layout className="site-layout">
        <Header
          style={{
            padding: 0,
            background: colorBgContainer,
          }}>
          Header
        </Header>
        <Content
          style={{
            margin: '0 16px',
          }}
        >
          <Breadcrumb
            style={{
              margin: '16px 0',
            }}
          >
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb>
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: colorBgContainer,
            }}
          >
            {/* 路由占位符 */}
            <Outlet />
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};
export default Home;



